<template>
	<view>		
		<!-- 分类选项 -->
		<view class="uni-tab-bar tab-bar-wrap">
			<scroll-view scroll-x="true" class="uni-swiper-tab" id="scroll-view-classfication">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list class-item" :class="{'active':tabIndex == index}" @tap="tabtap(index)">
					{{tab.name}} 
					</view>
				</block>
			</scroll-view> 
			<!-- 当前分类不是推荐选项的时候，显示下面分类条件 -->
			<view class="order-condition-wrap" v-if="tabIndex != 0">
				<view class="order-condition" v-for="(item,index) in orderCondition" :key="index" :class="{'active':curConditionIndex == index}" @tap="changeOrderCondition(index)">
					{{item}}
				</view>
				<!-- <view class="order-condition active">综合 -->
					<!-- <text>按时间</text> -->
					<!-- <view class="order-arrow">
						<text class="uni-icon uni-icon-arrowup"></text>
						<text class="uni-icon uni-icon-arrowdown"></text>
					</view> -->
				<!-- </view>
				<view class="order-condition">最新</view>
				<view class="order-condition">最热</view> -->
			</view>	
		</view>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newsList" :key="index">
					
					<!-- 推荐布局 -->
					<scroll-view v-if="index==0" scroll-y="true" class="list">
						<!-- 轮播图 -->
						<view class="swiper-wrap">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item class="swiper-item" v-for="(swiperItem,index) in items.swiperList" :key="index">
									<image :src="swiperItem.pic" mode=""></image>
								</swiper-item>
							</swiper>
						</view>	
						<!-- 精彩推荐 -->
						<index-recommend-list sectionName="精彩推荐" itemWidth=160 temHeight=112 :list="recommondList"></index-recommend-list>
						<!-- 最新上新 -->
						<index-recommend-list sectionName="最新上新" itemWidth=110 itemHeight=86 :list="latestList"></index-recommend-list>
					</scroll-view>
					
					<!-- 推荐之外的分类布局 --> 
					<scroll-view v-else scroll-y="true" class="list">
						<!-- 图文列表 -->
						<block v-for="(item,index1) in items.list" :key="index1" >
							<index-class-list :item="item" :index="index1"></index-class-list>
						</block>
						<!-- 加载更多 -->
						<view class="load-more">{{items.loadtext}}</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template> 

<script>
	import indexClassList from "@/components/index/index-class-list/index-class-list.vue"
	import indexRecommendList from "@/components/index/index-recommend-list/index-recommend-list.vue"
	export default {
		components:{
			indexClassList,
			indexRecommendList
		},
		methods: {
			//改变排序条件（综合，最新，最热）
			changeOrderCondition(index){
				this.curConditionIndex = index;
			},
			//上拉加载
			loadmore(index){
				if(this.newsList[index].loadtext!="上拉加载更多"){
					return;
				}
				this.newsList[index].loadtext="加载中...";
				setTimeout(()=>{
					//获取完成
					let obj={
						title:"小白兔与大灰狼",
						pic:"../../../static/balloon.jpg",
						describe:"这是小白兔与大灰狼的故事",
						releaseTime:"2020.2.18" 
					}
					this.newsList[index].list.push(obj);
					this.newsList[index].loadtext="上拉加载更多";
				},1000);
				// this.newsList[index].loadtext="没有更多了";
			},
			//点击事件
			tabtap(index){
				this.tabIndex = index;
			},
			//滑动事件
			tabChange(e){
				this.tabIndex = e.detail.current;
				console.log(JSON.stringify(e.detail));
			}
		},
		//原生导航栏按钮监听
		onNavigationBarButtonTap(e){
			//导航栏左边按钮
			if(e.index == 0){
				uni.navigateTo({
					url:"../login/login"
				});
			} else {
				console.log("搜索");
			}
		},
		onLoad() {
				
			this.isLogin = false;
			//判断是否登陆，根据情况改变leftTexr内容
			if(this.isLogin){
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();  
				// 修改buttons   
				webView.setTitleNViewButtonStyle(0, {  
				    text: ' ',  
					width:"0px"
				});   
				// #endif  
			};
			uni.getSystemInfo({
				success:(res)=> {
					let _self = this;
					//获取分类导航栏的高度
					let info = uni.createSelectorQuery().select(".uni-tab-bar");
			　　　  		info.boundingClientRect(function(data) { //data - 各种参数
						//data.hieght为整个屏幕的高度
						console.log(2222)
						_self.swiperHeight = res.windowHeight-data.height;
			　　    }).exec();
				}
			})
		},
		data() {
			return {  
				tabBarHeight:'',//顶部导航栏的高度
				isLogin:Boolean,
				tabIndex: 0,
				swiperHeight: 500,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				curConditionIndex:0,//当前按什么排序，排序的index
				orderCondition:["综合","最新","最热"],//排序条件数组
				//精彩推荐list
				recommondList:[
					{
						title:"小红帽",
						pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__b755f20d039f5097d912d931649e216b",
						describe:"这是小白兔与大灰狼的故事"
					},
					{
						title:"大灰狼",
						pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__b755f20d039f5097d912d931649e216b",
						describe:"这是小白兔与大灰狼的故事"
					}
				],
				//最新上新list
				latestList:[
					{
						title:"小红帽",
						pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__88909cbe722ef4e578bc08f89eb8c4d6",
						describe:"这是小白兔与大灰狼的故事"
					},
					{
						title:"小红帽",
						pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__88909cbe722ef4e578bc08f89eb8c4d6",
						describe:"这是小白兔与大灰狼的故事"
					},
					{
						title:"小白兔",
						pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__88909cbe722ef4e578bc08f89eb8c4d6",
						describe:"这是小白兔与大灰狼的故事"
					}
				],
				//分类list
				tabBars: [
					{name:"推荐",id:"tuijian"},
					{name:"全部分类",id:"quanbu"},
					{name:"童话",id:"tonghua"},
					{name:"搞笑",id:"gaoxiao"},
					{name:"寓言",id:"yuyan"}
				],
				newsList:[
					{	
						//轮播图list
						swiperList:[
							{
								title:"小白兔与大灰狼",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__894b78dc82ff5a39d1e47ed46b8ea8f3",
								describe:"这是小白兔与大灰狼的故事"
							},
							{
								title:"小白兔与大灰狼",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__894b78dc82ff5a39d1e47ed46b8ea8f3",
								describe:"这是小白兔与大灰狼的故事",
							},
							{
								title:"小白兔与大灰狼",
								pic:"https://pic3.zhimg.com/v2-c7f42d37914980445a2e4014cca49be1_r.jpg",
								describe:"这是小白兔与大灰狼的故事",
							}
						],
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								title:"小白兔与大灰狼",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__068fed14d4401c8bd24ac5928d7d2de3",
								describe:"这是小白兔与大灰狼的故事",
								releaseTime:"2020.2.18" 
							},
							{
								title:"小白兔与大灰狼",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__068fed14d4401c8bd24ac5928d7d2de3",
								describe:"这是小白兔与大灰狼的故事",
								releaseTime:"2020.2.18" 
							},
							{
								title:"上山打老虎", 
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__068fed14d4401c8bd24ac5928d7d2de3",
								describe:"这是小白兔与大灰狼的故事",
								releaseTime:"2020.2.18" 
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								title:"12345",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__068fed14d4401c8bd24ac5928d7d2de3",
								describe:"这是小白兔与大灰狼的故事",
								releaseTime:"2020.2.18" 
							},
							{
								title:"上山打老虎",
								pic:"https://axure-file.lanhuhu.com/f1222d75-b30e-4ad9-bcf1-54e90c7cec05__068fed14d4401c8bd24ac5928d7d2de3",
								describe:"这是小白兔与大灰狼的故事",
								releaseTime:"2020.2.18" 
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					}
				]
			}
		}
	}

</script>

<style> 
page{
	background-color: #EEEEEE;
}
.tab-bar-wrap {
	background-color: #EEEEEE;
	position: sticky; 
	top: 0;
	left: 0;
	z-index: 9999;
}
.order-condition-wrap {
	color: #737373;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #D7D7D7;
}
.order-condition-wrap .order-condition {
	margin-left: 10px;
	width: 75px;
	padding: 3px 0;
	font-size: 14px;
	text-align: center;
}
.order-condition-wrap .active {
	color: #FF8920;
} 
/* .order-arrow {
	display: flex;
	flex-direction: column; 
}
.order-arrow text{
	font-size: 12px;
	font-weight: bold;
} */


.load-more{
	text-align: center;
	color: #AAAAAA;
	padding: 10upx;
}


#scroll-view-classfication{
	width: 100%;
	white-space: nowrap;
	color: #FFC108;
	border: none;
}
#scroll-view-classfication .class-item{
	display: inline-block;
	margin-left: 10px;
	width: 75px;
	padding: 3px 0;
	text-align: center;
	border: 1px solid #FFC108;
	border-radius: 40px;
	color: #FFC108;
}
#scroll-view-classfication .active {
	background-color: #FFC108;
	color: white;
}
.swiper-wrap {
	width: 100%;
	margin-bottom: 10px;
}
.swiper {
	height: 180px;
}
.swiper-item {
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
}
.swiper-item image{
	width: 100%;
}
</style>
